/**
 * 入参
 *
 */
import React, { PureComponent } from 'react';
import { SecondHeaderC } from '../../../../comps';
import { connect } from 'dva';
import SxConditionC from './sxConditionC';
import ConditionSettingC from './conditionSettingC';
import ResultC from './resultC';

class CommonComp extends PureComponent {
  static defaultProps = {
    onRef: () => {}, // 本组件的引用
  };
  state = {
    settingInfo: undefined, //筛选时的入参
  };
  componentDidMount() {
    this.props.onRef(this);
  }

  //条件筛选复选框 点击事件变化 拿到选中项数据
  onChange = (data, arr) => {
    this.setting.responseChange(data, arr); //将checked的指标给条件设置组件
  };
  //清空
  reset = () => {
    this.shaixuan.reset(); //筛选条件复选框重置
    this.setting.reset();
    this.setState({
      settingInfo: undefined,
    });
  };
  //获取条件设置表格数组
  getInfo = () => {
    return this.setting.getInfo();
  };
  //条件设置删除某一行 通知筛选条件组件 取消checked
  settingOnchange = (indexType, id, select) => {
    this.shaixuan.responseChange(indexType, id, select); //将checked的指标给条件设置组件
  };
  render() {
    const { dataSource } = this.props;
    return (
      <div>
        <div>
          <SecondHeaderC title={'筛选条件'} />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <SxConditionC dataSource={dataSource} init={this.props.detail} onChange={this.onChange} onRef={(ref) => (this.shaixuan = ref)} tabType={this.props.tabType} />
        </div>
        <div>
          <SecondHeaderC title={'条件设置'} />
        </div>
        <div>
          <ConditionSettingC onRef={(ref) => (this.setting = ref)} onChange={this.settingOnchange} settingInfo={(e) => this.setState({ settingInfo: e })} />
        </div>
        <div>
          <SecondHeaderC title={'筛选结果'} />
        </div>
        <div>
          {this.state.settingInfo ? (
            <ResultC settingInfo={this.state.settingInfo} type={this.props.type} />
          ) : (
            <div
              style={{
                height: '300px',
                textAlign: 'center',
                paddingTop: '100px',
              }}
            >
              请点击筛选按钮,加载相应数据!
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default connect(({ AssetPreparationM, userM: user, loading }) => ({
  AssetPreparationM,
  user,
  loading,
}))(CommonComp);
